<template>
    <div>
        <table class="table">
            <tr>
                <th>序号&nbsp;&nbsp;</th>
                <th>商品名称&nbsp;&nbsp;</th>
                <th>商品价格&nbsp;&nbsp;</th>
                <th>购买数量&nbsp;&nbsp;</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in goods_list" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{ item.text }}</td>
                <td>{{ item.price }}</td>
                <td><button @click="item.num--">-</button>{{ item.num }}<button @click="item.num++">+</button></td>
                <td><button>移除</button></td>
            </tr>
        </table>
        总价: {{ total | price_filter }}
    </div>
</template>

<script>
export default {
    data(){
        return{
            goods_list:[{text:"iphone 8",price:'5099',num:"1"},{text:"iphone xs",price:'8699',num:"1"},{text:'iphone xr',price:'6499',num:"1"}],
        }
    },
    watch:{
        counter:function(){
            console.log('商品数量变化')
        }
    },
    computed:{
        total(){
            let a_list = this.goods_list;
            let num = 0;
            let price = 0;
            for (let index = 0; index < a_list.length; index++){
                price += a_list[index].price * a_list[index].num;
            }
            this.count = price
            return this.count
        }
    },
    filters:{
        price_filter:function(value){
            if(value){
                return '$' + value
            }
        }
    },

}
</script>

<style>
    .table{border: 1px solid black}
</style>